<!-- 省份排布大屏 -->
<template>
	<div id="viewScreen" class="container">
		<!-- 统计数字=================================== -->
		<div class="count">
			<div class="count-item" v-for="item in 5" :key="item">
				<div class="count-item-title">标题</div>
				<div class="count-item-num">680</div>
			</div>
		</div>
		<!-- 统计图表=================================== -->
		<div class="statis">
			<!-- 排行榜 -->
			<div class="statis-order">
				<div class="statis-order1">
					<p class="statis-title">调解职场人均呼叫量排行榜</p>
					<div class="statis-order1-list order-list">
						<div class="list-item" v-for="item in 10" :key="item">
							<div class="list-item-num" :style="{ background: getOrdeColor(item) }">{{ item }}</div>
							<div class="list-item-name">职场{{ item }}</div>
							<div class="list-item-bar">
								<p :style="{ width: getOrderBar(item) }"></p>
							</div>
						</div>
					</div>
				</div>
				<div class="statis-order2">
					<p class="statis-title">坐席呼叫量排行榜</p>
					<div class="statis-order2-list order-list">
						<div class="list-item" v-for="item in 3" :key="item">
							<div class="list-item-num" :style="{ background: getOrdeColor(item) }">{{ item }}</div>
							<div class="list-item-name">坐席{{ item }}</div>
							<div class="list-item-bar">
								<p :style="{ width: getOrderBar(item) }"></p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 省份分布 -->
			<div class="statis-map w-1/2">
				<p class="statis-title">客户地区分布</p>
				<div id="chinaMap"></div>
			</div>
			<!-- 圆形图表 -->
			<div class="statis-callout">
				<div class="total">
					<p class="statis-title">调解总数日环比</p>
					<div id="totalChart"></div>
				</div>
				<div class="duration">
					<p class="statis-title">调解总时长日环比（分钟）</p>
					<div id="durationChart"></div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup name="ChinaMap">
	import { onMounted } from 'vue'
	import * as echarts from 'echarts'
	import chinaJson from '@/assets/map/china.json'
	import 'echarts-liquidfill'
	// ===========================================DATA======================================================
	let chartDom
	let totalChartDom
	let durationChartDom
	let mapChart
	let totalChart
	let durationChart
	let mapOption = ref({
		// 标题配置
		title: {
			textStyle: {
				color: '#fff'
			}
		},
		// 提示框配置
		tooltip: {
			trigger: 'item' // 数据项触发，鼠标移到省份上时显示
		},
		// 视觉映射组件
		visualMap: {
			min: 0, // 最小值
			max: 1000, // 最大值
			// text: ['High', 'Low'],
			// realtime: true,
			// calculable: true,
			// show:false,
			inRange: {
				color: ['#87B0F3', '#0B22C4'] // 深蓝到亮蓝的渐变
			},
			textStyle: {
				color: '#fff' // 文字颜色设为白色
			},
			top: 0
		},

		// 系列列表
		series: [
			{
				type: 'map',
				map: 'china',
				roam: true, // 添加此配置允许缩放平移
				zoom: 1.2, // 缩放比例
				label: {
					show: true,
					fontSize: 8,
					color: '#fff'
				},
				itemStyle: {
					areaColor: '#142957',
					borderColor: '#1E4B9C',
					borderWidth: 1
				},
				emphasis: {
					label: {
						color: '#fff'
					},
					itemStyle: {
						areaColor: '#0066FF'
					}
				},
				data: [
					{ name: '广东省', value: 900 },
					{ name: '北京市', value: 800 },
					{ name: '上海市', value: 700 },
					{ name: '浙江省', value: 600 },
					{ name: '江苏省', value: 500 },
					{ name: '福建省', value: 400 },
					{ name: '山东省', value: 300 },
					{ name: '河南省', value: 200 },
					{ name: '湖北省', value: 100 },
					{ name: '湖南省', value: 50 },
					{ name: '安徽省', value: 10 },
					{ name: '江西省', value: 20 },
					{ name: '四川省', value: 200 },
					{ name: '云南省', value: 950 },
					{ name: '陕西省', value: 800 },
					{ name: '重庆市', value: 500 },
					{ name: '贵州省', value: 600 },
					{ name: '台湾省', value: 30 },
					{ name: '河北省', value: 40 },
					{ name: '山西省', value: 50 },
					{ name: '内蒙古自治区', value: 60 },
					{ name: '辽宁省', value: 70 },
					{ name: '吉林省', value: 5 },
					{ name: '黑龙江省', value: 10 },
					{ name: '甘肃省', value: 20 },
					{ name: '青海省', value: 30 },
					{ name: '宁夏回族自治区', value: 40 },
					{ name: '新疆维吾尔自治区', value: 50 },
					{ name: '西藏自治区', value: 60 },
					{ name: '广西壮族自治区', value: 70 },
					{ name: '海南省', value: 80 },
				]
			}
		]
	})
	let totalOption = {
		series: [
			{
				type: 'liquidFill',
				data: [0.753],
				radius: '80%',
				color: ['#3D76F6'],
				backgroundStyle: {
					color: 'transparent'
				},
				outline: {
					show: true,
					borderDistance: 8,
					itemStyle: {
						borderWidth: 2, // 设置边框粗细
						borderColor: '#2c4095' // 设置边框颜色
						// shadowBlur: 20, // 添加阴影效果
						// shadowColor: '#3D76F6'
					}
				},
				label: {
					fontSize: 32,
					fontWeight: 400,
					color: '#fff',
					formatter: (param) => {
						return param.value * 100 + '%'
					}
				},
				itemStyle: {
					opacity: 0.8
				},
				emphasis: {
					itemStyle: {
						opacity: 0.9
					}
				}
			}
		]
	}
	let durationOption = {
		series: [
			{
				type: 'pie',
				radius: ['65%', '85%'],
				avoidLabelOverlap: false,
				label: {
					show: true,
					position: 'center',
					formatter: '75%',
					fontSize: 32,
					color: '#fff'
				},
				data: [
					{
						value: 75,
						name: '已完成',
						itemStyle: {
							color: '#3D76F6'
						}
					},
					{
						value: 25,
						name: '未完成',
						itemStyle: {
							color: '#142957'
						}
					}
				]
			}
		]
	}
	let colorList = ['#1F2C85', '#3B50D0', '#3D76F6', '#3B50D0', '#1F2C85']
	const orderColor = ['#EEB140', '#B2BDCF', '#C5A17D', '#1B2760']
	// ===========================================WATCH=====================================================
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		//绘制省份分布图--------------------------------
		// 注册地图数据
		echarts.registerMap('china', chinaJson)
		chartDom = document.getElementById('chinaMap')
		// 初始化时指定主题和渲染器
		mapChart = echarts.init(chartDom)
		mapChart.setOption(mapOption.value)
		// 绘制水球图-----------------------------------
		totalChartDom = document.getElementById('totalChart')
		totalChart = echarts.init(totalChartDom)
		totalChart.setOption(totalOption)
		// 绘制环比图-----------------------------------
		durationChartDom = document.getElementById('durationChart')
		durationChart = echarts.init(durationChartDom)
		durationChart.setOption(durationOption)

	})

	// 组件卸载时清理
	onUnmounted(() => {
		window.removeEventListener('resize', chinaMapResize)
		mapChart && mapChart.dispose()
	})
	// ===========================================METHODS==================================================
	//排名色
	const getOrdeColor = (order) => {
		switch (order) {
			case 1:
				return orderColor[0]
			case 2:
				return orderColor[1]
			case 3:
				return orderColor[2]
			default:
				return orderColor[3]
		}
	}
	//排名榜进度条
	const getOrderBar = (order) => {
		return `${((10 - order + 1) / 10) * 100}%`
	}
	// ===========================================REQUEST==================================================
</script>
<style scoped>
	#viewScreen {
		display: flex;
		flex-direction: column;
		color: #fff;
		padding: 20px;
		background: #18233e;
		/* 统计数字 */
		.count {
			height: 150px;
			display: grid;
			grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
			grid-column-gap: 5px;
			margin-bottom: 10px;
			.count-item {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: center;
				padding: 20px 0;
				.count-item-title {
					font-size: 18px;
				}
				.count-item-num {
					font-size: 32px;
				}
			}
			.count-item:nth-child(1),
			.count-item:nth-child(5) {
				background: #1f2c85;
			}
			.count-item:nth-child(3) {
				background: #3d76f6;
			}
			.count-item:nth-child(2),
			.count-item:nth-child(4) {
				background: #3b50d0;
			}
		}
		/* 统计图表 */
		.statis {
			display: flex;
			justify-content: space-between;
			align-items: center;
			> div {
				height: 100%;
				border: 2px solid #2c4095;
				padding: 20px 20px;
				.statis-title {
					font-size: 20px;
					font-weight: 600;
				}
			}
			/* 排行榜 */
			.statis-order,
			.statis-callout {
				flex: 1;
			}
			.statis-order {
				display: grid;
				grid-template-rows: 3.5fr 1.5fr;
				.statis-order1,
				.statis-order2 {
					display: flex;
					flex-direction: column;
				}
				.statis-order2 {
					padding: 20px 0;
				}
				.order-list {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.list-item {
						display: grid;
						grid-template-columns: 0.5fr 1fr 2.5fr;
						padding-bottom: 10px;
						text-align: center;
						.list-item-num {
							padding: 5px;
						}
						.list-item-name {
							margin: auto 10px;
						}
						.list-item-bar {
							display: flex;
							align-items: center;
							p {
								border-radius: 2px;
								background: linear-gradient(to right, #87b0f3, #0b22c4);
								margin-bottom: 0;
								height: 12px;
							}
						}
					}
				}
			}
			/* 省份分布 */
			.statis-map {
				margin: 0 10px;
				#chinaMap {
					width: 100%;
					height: 650px;
				}
			}
			/* 圆形图表 */
			.statis-callout {
				display: grid;
				grid-template-rows: 1fr 1fr;
				grid-row-gap: 10px;
				justify-content: center;
				.total,
				.duration {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					> div {
						flex: 1;
					}
				}
			}
		}
	}
</style>
